<template>
    <div class="forgetPassword">
			<!-- 内容 -->
			<div class="login_div">
				<li class="login_div_li1">
					<div class="login_div_li1_div">
					
					</div>
					<li class="login_div_li1_font" >
						智慧小巷
					</li>
				</li>
			</div>
			<div class="forgetPassword_div">
				<li class="forgetPassword_div_li2">
					<van-icon name="contact"   color="#fff"/>
					<div>账号</div>
					<input type="text" v-model="loginId" placeholder="请输入账号" class="login_input">
				</li>
				
				<li class="forgetPassword_div_li2">
					<van-icon class="el-icon-lock" color="#fff"/>
					<div>新密码</div>
					<input type="password" v-model="loginPassword" show-password placeholder="含字母、数字、6-16位">
				</li>
				
				<li class="forgetPassword_div_li2">
					<van-icon class="el-icon-lock" color="#fff"/>
					<div>确认密码</div>
					<input type="password" v-model="twoPassword" show-password placeholder="含字母、数字、6-16位">
				</li>
				
				 

				<li class="forgetPassword_div_li2">
					<div>邮箱验证码</div>
					<input type="text" v-model="code" class="lastInput" placeholder="请输入邮箱验证码" style="flex: none">
					
					 <el-button
             class="regBut"
            v-if="!isActive"
            @click.prevent="getRCode"
            :disabled="isActive"
          >
            获取验证码
          </el-button>
          <el-button
            class="regBut"
            v-else
            @click.prevent="getRCode"
            :disabled="isActive"
          >
            {{delayTime }}s
          </el-button>


				</li>
				
				<li class="register_getuser" @click="forgetPassword">
					确定修改密码
				</li>
				
				<li class="forgetPassword_div_li3">
					<i class="el-icon-back"></i><span @click="goLogin()">返回登录</span>
					<span @click="goRegister()">返回注册</span><i class="el-icon-right"></i>
				</li>
			</div>
		</div>
</template>

<script>
	import { Notify } from 'vant';
	import{ isEmail} from "../utils/tools"
export default {
    data () {
      return {
				loginId:"",
				loginPassword:"",
				twoPassword:"",
				email:"",
				code:"",//验证码
				 token: "",
				isActive: false,
				delayTime: 20 
			}
    },

    methods: {
			//去登录
			goLogin(){
				this.$router.push('/login')
			},
			//去注册
			goRegister(){
				this.$router.push('/register')
			},
			 

			 //获取邮箱验证码
		getRCode() {
		// 如果邮箱正确
		 
			this.$axios({
			method: "get",
			url: "/sys/user/findPwdEmail",params:{username: this.loginId}
 
		})
			.then((resule) => {	  
			this.token = resule.data.data.token;
            // 获取验证码按钮禁用20s
            if( resule.data.data.token){
		     Notify({ type: "success", message: "获取验证码成功,请查看邮箱！" });		
               let that = this;
			let oder = that.delayTime;
			this.isActive = true;
		setTimeout(() => {
			that.isActive = false;
		}, that.delayTime * 1000);

		let timer = setInterval(() => {
			that.delayTime--;
			if (that.delayTime == 0) {
			clearInterval(timer);
			that.delayTime = oder;
			}
		}, 1000);
			}

			})
			.catch((r) => {
			console.log(r);
			});
		 
		
		},
		// 确定修改密码
		 

     forgetPassword() {
       const reg = /^(?=.*[0-9])(?=.*[a-zA-Z]).{6,16}$/; // 字母数字6-16
      if (typeof this.loginId == "undefined" || this.loginId == "") {
          // console.log("请输入账号")
          Notify({ type: "danger", message: "请输入账号" });
          return;
        }
        else if (
          typeof this.loginPassword == "undefined" ||
          this.loginPassword == ""
        ) {
          Notify({ type: "danger", message: "请输入密码" });
         return;
        }
        else if(!reg.test(this.loginPassword)){
                Notify({ type: "danger", message: "密码中必须包含字母、数字、6-16位之间" });
                 return;
        } 
       else if (typeof this.twoPassword == "undefined" || this.twoPassword == "") {
          Notify({ type: "danger", message: "请输入确认密码" });
          return;
        }else if (this.code == "") {
        
        Notify({ type: "danger", message: "验证码不能为空" });
         return;
      } else if (this.loginPassword != this.twoPassword) {
          Notify({ type: "danger", message: "两次密码不一致" });
          return;
        }else{

          this.$axios
          .post(
            "/sys/user/findPwd",{
                username: this.loginId,
                password: this.loginPassword,
                code: this.code,
                token: this.token,
              }
          ).then((r) => {
            if (r.data.code == 200) {
              Notify({ type: "success", message: "修改密码成功！" });
              this.$router.push("/login");
            } else {
              Notify({ type: "danger", message: "修改密码失败！" });
            }
          });
        }
       
      
    },

		},

    
}
</script>

<style scoped>
.el-button {
	min-height: auto !important;
}
.van-icon::before{
	font-size: 1.5em;
    margin:0 5px;
}
.login{
		color: #FFFFFF;
	}
	.login{
		height: 100vh;
		/* background: url(../assets/logo.jpg); */
		/* filter: blur(25px) */
		position: relative;
	}
	.login:after{
		display: block;
		height: 100%;
		width: 100%;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: url(../assets/zhihui.png);
		background-size: 100% 100%;
		/* background-color: rgba(57,169,237,0.2); */
		filter: blur(30px);
		z-index: 2;
	}
	.login_div{
		height: 70%;
		width: 100%;
		position:fixed;
		top: 10%;
		z-index: 999;
	}
	.login_div_li1{
		display: flex;
		flex-direction:column;
		align-items: center;
		justify-content: center;
		
	}
	/* 存logo的div */
	.login_div_li1_div{
		height: 75px;
		width: 75px;
		background: url(../assets/zhihui.png);
		background-size: 100% 100%;
		border-radius: 50%;
	}
	.login_div_li1_font{
		font-size: 22px;
		color: #FFFFFF;
		z-index: 888;
		font-family: "KaiTi";
	}
	.forgetPassword{
		height: 100vh;
		/* background: url(../assets/logo.jpg); */
		/* filter: blur(25px) */
		position: relative;
	}
	.forgetPassword:after{
		display: block;
		height: 100%;
		width: 100%;
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		background: url(../assets/zhihui.png);
		background-size: 100% 100%;
		/* background-color: rgba(57,169,237,0.2); */
		filter: blur(30px);
		z-index: 2;
	}
	.forgetPassword_div{
		height: 70%;
		width: 100%;
		position:fixed;
		top: 27%;
		z-index: 999;
		color: #FFFFFF;
		font-size: 16px;
	}
	
	
	
	
	/* 存放input标签 */
	.forgetPassword_div_li2{
		height: 40px;
		width: 90%;
		margin: 10px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		
		font-size: 16px;
		border:  #FFFFFF solid 1px;
		border-radius: 0.13333rem; 
	}
	.forgetPassword_div_li2>div{
		width: 30%;
		line-height: 40px;
		height: 100%;
		color: #FFFFFF;
		padding: 0 0 0 5px;
		box-sizing: border-box;
	}
	.forgetPassword_div_li2 input {
		flex: 1;
		line-height: 40px;
		height: 100%;
		color: #FFFFFF;
		background-color: transparent;
	}
	.lastInput{
		width: 40%;
	}
	.regBut{
		background: #39A9ED;
		text-align: center;
		width: 30%;
		border: none;
		border-left: 1xp solid #fff;
	  border-left: 1px solid #fff;
       border-radius: 0;
	}
	.van-cell__title{
		color: #FFFFFF;
	}
	span{
		/* color: #FFFFFF; */
	}
	.is_user_ok{
		font-size: 15px;
		/* width: 100%; */
		margin: 10px 20px 10px 20px ;
		text-align: right;
	}
	.register_getuser{
		/* width: 100%; */
		height: 40px;
		font-size: 1.1em;
		  background: #07c160;
		margin: 10px 20px 10px 20px ;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
	}
	.forgetPassword_div_li2:hover{
		box-shadow: 0 0 5px #ccc;
		border: 1px solid #57a3f3;
	}
	.forgetPassword_div_li2:focus{
		  box-shadow: 0 0 5px #ccc;
		  border: 1px solid #57a3f3;
	}
	
	
	.forgetPassword_div_li3{
		width: 90%;
		padding: 0 5px;
		margin: 10px auto;
		margin-top: 20px;
		margin-right: 30px;
		margin-left: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	 
	}
	.forgetPassword_div_li3>span{
		 
		padding: 5px 15px 5px 15px;
		border-radius: 5px;
	}
	
</style>
